<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--查询-->
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
        <el-form-item prop="skuNo">
          <el-input :placeholder="$t('sku')" v-model="queryParams.skuNo" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item prop="skuNameCn">
          <el-input
            :placeholder="$t('商品名称')"
            v-model="queryParams.skuNameCn"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
            {{ $t('搜索') }}
          </el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"> {{ $t('重置') }}</el-button>
        </el-form-item>
        <el-form-item
          prop="serializable"
          style="margin-left: 50px"
          v-hasPermi="['distribution:purchaseSkuSerializable:scrapOutWarehouse']"
        >
          <div style="display: flex; gap: 10px">
            <el-input
              v-model="queryParams.serializable"
              clearable
              placeholder="序列号"
              @keyup.enter.native="handleQuery"
            />
            <el-button type="primary" @click="handleScrap" size="mini">过期销毁</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="8">
        <Table1
          ref="table1Ref"
          @getList="getList"
          :title="$t('近期全部数据')"
          :formData="{}"
          :query="queryParams"
          v-hasPermi="['distribution:purchaseSkuSerializable:getRecentList']"
        />
      </el-col>
      <el-col :span="8">
        <Table2
          ref="table2Ref"
          @getList="getList"
          :title="$t('固定近期单月数据')"
          :formData="{}"
          :query="queryParams"
          v-hasPermi="['distribution:purchaseSkuSerializable:getFixedRecentList']"
        />
      </el-col>
      <el-col :span="8">
        <Table3
          ref="table3Ref"
          @getList="getList"
          :title="$t('已过期数据')"
          :formData="{}"
          :query="queryParams"
          v-hasPermi="['distribution:purchaseSkuSerializable:getExpiredRecentList']"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Table1 from './components/table1.vue'
import Table2 from './components/table2.vue'
import Table3 from './components/table3.vue'
import { scrapOutWarehouse } from '@/api/distribution/sku/inventoryExpirationList'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  name: 'SellerManage',
  components: {
    Table1,
    Table2,
    Table3,
  },
  data() {
    return {
      queryParams: {},
    }
  },
  watch: {},
  created() {},
  methods: {
    handleScrap() {
      if (!this.queryParams.serializable) {
        return this.$message({ type: 'error', message: '请输入报废序列号' })
      }
      this.$confirm(this.$t('确认报废?'), this.$t('提示'), {
        type: 'warning',
      })
        .then(() => {
          const data = {
            serializable: this.queryParams.serializable,
            outWarehouseType: 12,
          }
          scrapOutWarehouse(data).then((res) => {
            const { code, msg } = res
            if (code === 200) {
              this.$message({ type: 'success', message: msg })
              this.queryParams.serializable = ''
              this.getList()
            }
          })
        })
        .catch((e) => e)
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {},
    /** 查询用户列表 */
    getList() {
      this.$refs['table1Ref']?.getList()
      this.$refs['table2Ref']?.getList()
      this.$refs['table3Ref']?.getList()
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
  },
}
</script>
<style scoped lang="scss"></style>
